import template from './ng-radio.template.html';

/**
 * ng-radio 组件
 * 支持单选功能，可以水平或垂直排列
 *
 * 使用示例：
 * <ng-radio
 *   options="options"
 *   ng-model="selectedValue"
 *   name="radioGroup"
 *   disabled="false"
 *   layout="horizontal">
 * </ng-radio>
 *
 * 参数说明：
 * @param {Array} options - 选项数组，每项可以是字符串或对象 {label: '显示文本', value: '值', disabled: false}
 * @param {String} ngModel - 双向绑定的选中值
 * @param {String} name - radio group 的名称
 * @param {Boolean} disabled - 是否禁用整个组件
 * @param {String} layout - 布局方式，'horizontal' 或 'vertical'，默认 'horizontal'
 */

export default function ngRadioDirective() {
  return {
    restrict: 'E',
    template: template,
    scope: {
      options: '=',
      ngModel: '=',
      name: '@',
      disabled: '=?',
      layout: '@?'
    },
    link: function(scope, element, attrs) {
      // 初始化默认值
      scope.layout = scope.layout || 'horizontal';
      scope.disabled = scope.disabled || false;

      // 生成唯一的 name
      if (!scope.name) {
        scope.name = 'radio-' + Math.random().toString(36).substr(2, 9);
      }

      // 初始化规范化选项数组
      scope.normalizedOptions = [];

      // 规范化选项数据的函数
      function normalizeOptions() {
        if (!scope.options || !Array.isArray(scope.options)) {
          scope.normalizedOptions = [];
          return;
        }

        scope.normalizedOptions = scope.options.map(function(option, index) {
          if (typeof option === 'string' || typeof option === 'number') {
            return {
              label: option,
              value: option,
              disabled: false,
              id: scope.name + '-' + index
            };
          } else if (typeof option === 'object') {
            return {
              label: option.label || option.value,
              value: option.value,
              disabled: option.disabled || false,
              id: scope.name + '-' + index
            };
          }
          return null;
        }).filter(function(option) {
          return option !== null;
        });
      }

      // 监听 options 变化，更新规范化选项
      scope.$watch('options', function(newVal) {
        normalizeOptions();
      }, true);

      // 选中某个选项
      scope.selectOption = function(option) {
        if (scope.disabled || option.disabled) {
          return;
        }
        scope.ngModel = option.value;
      };

      // 判断是否选中
      scope.isChecked = function(option) {
        return scope.ngModel === option.value;
      };

      // 判断是否禁用
      scope.isDisabled = function(option) {
        return scope.disabled || option.disabled;
      };

      // 监听外部 ngModel 变化
      scope.$watch('ngModel', function(newValue) {
        // 触发 ng-change 事件
        if (attrs.ngChange) {
          scope.$parent.$eval(attrs.ngChange);
        }
      });
    }
  };
}
